<template>
  <div class="big-box">
    <div class="box mx-auto rounded py-3 px-4">
    <h1 class="text-center font-20 mb-4" ref="myh1">
      <router-link to="/login">登录</router-link>
      <span>·</span>
      <router-link to="/register">注册</router-link>
    </h1>

    <el-form ref="myform" :model="form" :rules="rules" status-icon>
      <el-form-item label="" prop="logname">
        <el-input
          v-model="form.logname"
          placeholder="用户名"
          prefix-icon="el-icon-user-solid"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="logpass" style="margin-bottom:10px">
        <el-input
          v-model="form.logpass"
          type="password"
          placeholder="密码"
          show-password
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>

      <el-form-item prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="我已阅读协议并同意" name="type" v-model="form.type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-button
        type="success"
        class="login-btn"
        @click="logfn('myform')"
        :loading="isLoad"
        >登录</el-button
      >
    </el-form>
  </div>
  </div>
</template>

<script>
import { login } from '@/api/user';
export default {
  data() {
    return {
      isLoad: false,
      form: {
        logname: "",
        logpass: "",
        type: false,
      },
      rules: {
        logname: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        logpass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 12,
            message: "长度在 5 到 12 个字符",
            trigger: "blur",
          },
        ],
        type: [
          { validator: (rule, value, callback) => {
            if (value) {
              callback();
            } else {
              callback(new Error("请勾选协议！"));
            }
          }, trigger: "change" }
        ],
      },
    };
  },

  created () {
    let mytoken = localStorage.getItem('token');
    if (mytoken) {
      this.$router.push('/home')
    }
  },

  methods: {
    logfn(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          this.isLoad = true;
          
            login(this.form).then((r) => {
              this.isLoad = false;
              if (r.data.code === 0) {
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                // 前端拿到后端返回的token
                // console.log(typeof r.data.token);
                localStorage.setItem('token', r.data.token)
                localStorage.setItem('username', r.data.username)
                this.$router.push({path:'/'})
              }
              if (r.data.code === 1) {
                this.$message({
                  message: "用户名错误",
                  type: "error",
                });
              }
              if (r.data.code === 2) {
                this.$message({
                  message: "密码错误",
                  type: "error",
                });
              }
            });
        } else {
          console.log("验证不通过");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.big-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(../assets/images/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.box {
  width: 350px;
  min-height: 200px;
  margin-top: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 8px 4px rgb(165, 210, 240);
  span {
    margin: 0 20px;
    color: #888;
  }
  a {
    color: #888;
  }
}

a.router-link-active {
  color: orangered;
  border-bottom: 2px solid orangered;
  padding-bottom: 6px;
}

.login-btn {
  width: 100%;
}


</style>

<style>
 .el-form-item__content {
  line-height: 26px;
}
</style>